<script lang="ts">
// 库房管理-库房明细账
export default {
  name: "machin"
};
</script>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import { VxeTableInstance, VxeToolbarInstance } from "vxe-table";
import {
  queryWhRecordDetailPage,
  downloadWhRecordDetail
} from "/@/api/wms/machin";
import { queryStorageAll } from "/@/api/wms/warehouse";
import { queryLocationAllByS } from "/@/api/wms/location";
import { dateFormatYMD } from "/@/utils/date";
import { useRoute } from "vue-router";
import { errorMessage } from "/@/utils/message";
import { getReceiptsTypeEnums } from "/@/api/wms/console";
const route = useRoute();
const routeName = route.name as string;
const xTable = ref({} as VxeTableInstance);
const xToolbar = ref({} as VxeToolbarInstance);
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});
const table = reactive({
  loading: false,
  tableData: [] as any[],
  tableHeight: 0, //表格高度
  typeData: [] as any[],
  id: null,
  listQuery: {
    bnoType: "",
    bomName: "",
    code: "",
    date: "" as any,
    releaseBh: "",
    storageId: "" as any,
    storageLocationCode: "",
    supplier: "",
    texture: "",
    whType: "" as any,
    wtype: "" as any
  }
});
// 查询
const searchEvent = () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  data.wtype =
    table.listQuery.wtype === "" || table.listQuery.wtype == -1
      ? -1
      : table.listQuery.wtype;
  data.whType =
    table.listQuery.whType === "" || table.listQuery.whType == -1
      ? -1
      : table.listQuery.whType;
  data.storageId =
    table.listQuery.storageId === "" || table.listQuery.storageId == -1
      ? -1
      : table.listQuery.storageId;
  delete data.date;
  if (table.listQuery.date) {
    data.startOperationTime =
      dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endOperationTime =
      dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startOperationTime = "";
    data.endOperationTime = "";
  }
  table.loading = true;
  queryWhRecordDetailPage(data).then((res: any) => {
    if (res.code === 0) {
      table.tableData = res.data.list;
      page.totalResult = res.data.total;
    }
    table.loading = false;
  });
};

// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};
// 弹窗绑定的数据
const dialog = reactive({
  num: 0,
  amout: 0,
  blance: 0,
  dialogTitle: "",
  wtype: 0,
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  showNum: false,
  storageData: [] as any[], //存储库房信息
  goodsData: [] as any[], //商品数组
  locationData: [] as any[], //存储库位信息
  disabledDate: function (time) {
    return time.getTime() - 8.64e7 < Date.now();
  },
  formLabelWidth: "120px",
  codeOptions: [],
  storageOptions: [],
  insertForm: {
    remark: "",
    whRecord: [] as any[]
  },
  safeForm: {
    id: 0,
    safeBalance: 0
  },
  insertList: [],
  whId: 0,
  formRules: {
    remark: [{ required: true, message: "请选择入库说明", trigger: "blur" }]
  }
});
// 根据查询条件导出数据
const download = () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.wtype =
    table.listQuery.wtype === "" || table.listQuery.wtype == -1
      ? -1
      : table.listQuery.wtype;
  data.whType =
    table.listQuery.whType === "" || table.listQuery.whType == -1
      ? -1
      : table.listQuery.whType;
  data.storageId =
    table.listQuery.storageId === "" || table.listQuery.storageId == -1
      ? -1
      : table.listQuery.storageId;
  delete data.date;
  if (table.listQuery.date) {
    data.startOperationTime =
      dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endOperationTime =
      dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startOperationTime = "";
    data.endOperationTime = "";
  }
  downloadWhRecordDetail(data)
    .then((res: any) => {
      if (res.code == 500) {
        errorMessage(res.message);
      } else {
        const fileBlob = res;
        const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
        const element = document.createElement("a");
        element.setAttribute("href", fileUrl);
        element.setAttribute("downLoad", "库房明细账数据.xls");
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      }
    })
    .catch(() => {
      errorMessage("操作失败");
    });
};
// 查询所有库位
const queryStorage = () => {
  queryStorageAll().then((res: any) => {
    if (res.code === 0) {
      dialog.storageData = res.data;
    }
  });
};
// 根据库房Code查询所有库位
const queryLocation = () => {
  var storageCode =
    dialog.storageData.filter(
      (item: any) => item.id == table.listQuery.storageId
    )[0]?.code ?? "";
  storageCode &&
    queryLocationAllByS(storageCode).then((res: any) => {
      if (res.code === 0) {
        dialog.locationData = res.data;
      }
    });
};
// 工作台的订单类型下拉框数据
const getType = () => {
  getReceiptsTypeEnums().then((res: any) => {
    if (res.code === 0) {
      table.typeData = res.data;
    }
  });
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    searchEvent();
    queryStorage();
    getType();
    const $table = xTable.value;
    const $toolbar = xToolbar.value;
    $table.connect($toolbar);
    table.tableHeight = changeHeight();
  });
});
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="名称" field="bomName">
        <template #default="{ data }">
          <vxe-input
            v-model="data.bomName"
            placeholder="请输入名称"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="编码" field="code">
        <template #default="{ data }">
          <vxe-input v-model="data.code" placeholder="请输入编码"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="关联单号" field="releaseBh">
        <template #default="{ data }">
          <vxe-input
            v-model="data.releaseBh"
            placeholder="请输入关联单号"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="财务分类" field="wtype">
        <template #default="{ data }">
          <el-select
            v-model="data.wtype"
            filterable
            clearable
            placeholder="请选择财务分类"
            size="small"
            style="width: 100%"
          >
            <el-option label="原料" :value="1">原料</el-option>
            <el-option label="半成品" :value="2">半成品</el-option>
            <el-option label="成品" :value="3">成品</el-option>
            <el-option label="工具" :value="4">工具</el-option>
            <el-option label="配件" :value="5">配件</el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="库房" field="storageId">
        <template #default="{ data }">
          <el-select
            v-model="data.storageId"
            filterable
            clearable
            placeholder="请选择库房"
            size="small"
            style="width: 100%"
            @change="queryLocation"
            @clear="data.storageLocationCode = ''"
          >
            <el-option
              v-for="item in dialog.storageData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="库位" field="storageLocationCode">
        <template #default="{ data }">
          <el-select
            v-model="data.storageLocationCode"
            filterable
            clearable
            placeholder="请选择库位"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in dialog.locationData"
              :key="item.id"
              :label="item.code"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="单据类型">
        <template #default="{ data }">
          <el-select
            size="small"
            style="width: 100%"
            clearable
            v-model="data.bnoType"
            placeholder="请选择单据类型"
          >
            <el-option
              v-for="(item, index) in table.typeData"
              :key="item"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="操作类型" field="whType">
        <template #default="{ data }">
          <el-select
            v-model="data.whType"
            filterable
            clearable
            placeholder="请选择操作类型"
            size="small"
            style="width: 100%"
          >
            <el-option label="入库" :value="1">入库</el-option>
            <el-option label="出库" :value="2">出库</el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="操作时间" field="date" :item-render="{}">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.date"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            status="primary"
            icon="fa fa-search"
            v-auth="routeName + ':search'"
            @click="searchEvent"
            >查询
          </vxe-button>
          <vxe-button
            icon="fa fa-download"
            status="primary"
            @click="download"
            v-auth="routeName + ':download'"
            >导出数据</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-toolbar ref="xToolbar" style="margin: 12px 0 -12px 0" custom>
    </vxe-toolbar>
    <!-- :height="tableData.tableHeight" -->
    <vxe-table
      ref="xTable"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="name" title="名称" min-width="200"></vxe-column>
      <vxe-column field="code" title="编号" min-width="160"></vxe-column>
      <vxe-column field="bomType" title="财务分类" min-width="100"></vxe-column
      ><vxe-column
        field="storageName"
        title="库房"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="storageLocationCode"
        title="库位"
        min-width="120"
      ></vxe-column>
      <vxe-column field="whType" title="操作类型" min-width="100"></vxe-column>
      <vxe-column
        field="operationTime"
        title="操作时间"
        min-width="160"
      ></vxe-column>
      <vxe-column field="inNum" title="入库数量" min-width="100"></vxe-column>
      <vxe-column field="outNum" title="发出数量" min-width="100"></vxe-column>
      <vxe-column
        field="balanceAfter"
        title="结存数量"
        min-width="100"
      ></vxe-column>
      <vxe-column field="texture" title="材质" min-width="120"></vxe-column>
      <vxe-column field="longt" title="长度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.longt
          }}{{
            row.longt && row.lengthUnitCN ? "(" + row.lengthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="width" title="宽度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.width
          }}{{
            row.width && row.widthUnitCN ? "(" + row.widthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="thickness" title="厚度/高度(单位)" min-width="140">
        <template #default="{ row }">
          {{ row.thickness
          }}{{
            row.thickness && row.thicknessUnitCN
              ? "(" + row.thicknessUnitCN + ")"
              : ""
          }}
        </template>
      </vxe-column>
      <vxe-column
        field="specification"
        title="规格"
        min-width="120"
      ></vxe-column>
      <vxe-column field="weight" title="成本(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.weight
          }}{{
            row.weight && row.weightUnitCN ? "(" + row.weightUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="bnoType" title="单据类型" min-width="100"></vxe-column>
      <vxe-column
        field="releaseBh"
        title="单据编号"
        min-width="150"
      ></vxe-column>
      <vxe-column field="remark" title="备注" min-width="200"></vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

// .vxe-button.type--button:not(.is--round) {
//   border-radius: 0;
// }

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}

:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body),
:deep(.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content) {
  overflow: inherit;
}

.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select {
  width: 100% !important;
}
</style>
